<!DOCTYPE html>
<html>

<head>
    <title> React passing arguments to event handlers</title>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script type="text/babel">
    class Toggle extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isToogle: true,
            }
        }

        // click is ok
        handleClick = (id) => {
            // id = 5
            // this = Toggle
            console.log('handClick this:' + this);
            console.log('handClick this:' + id);
        }

        render() {
            return (
                //  Way 3: Recommended. Use class fields to bind callback
                <div>
                    <button onClick={this.handleClick.bind(this,5)}>
                        Click Button
                    </button>
                    <br />
                    <br />


                </div>
            );
        }
    }

    ReactDOM.render(<Toggle />, document.getElementById('root'));
</script>